<template>
  <view class="index" :class="{'life': curPanel == 'life', 'death': curPanel == 'death'}">
    <view>
      <image v-if="curPanel == 'life'" src="./static/life_bg.jpg" class="clock" mode="widthFix"></image>
      <image v-if="curPanel == 'death'" src="./static/death_bg.jpg" class="clock" mode="widthFix"></image>
      <template v-if="!showResult">
        <view class="label">请设置出生日期</view>
        <view class="ind_from">
          <view class="row" style="padding: 0;">
            <picker
              class="birth"
              mode="date"
              :value="birth"
              start="1900-01-01"
              @change="changeBirthChange"
            >
              <view class="uni-input">{{
                birth ? birth : "请设置出生日期"
              }}</view>
            </picker>
          </view>
        </view>
        <view class="btn" @click="submit">开始计算</view>
      </template>
      <view v-if="showResult" class="result">
        <view class="title">您已经{{ result.lifeAge }}岁了</view>
        <view class="desc">在世界上，您已经生活</view>
        <view class="table">
          <view class="row">
            <view class="col">
              <p>{{ result.lifeYear }}</p>
              <p>年</p>
            </view>
            <view class="col">
              <p>{{ result.lifeMonth }}</p>
              <p>月</p>
            </view>
            <view class="col">
              <p>{{ result.lifeWeek }}</p>
              <p>周</p>
            </view>
          </view>
          <view class="row">
            <view class="col">
              <p>{{ result.lifeDay }}</p>
              <p>天</p>
            </view>
            <view class="col">
              <p>{{ result.lifeHour }}</p>
              <p>小时</p>
            </view>
            <view class="col">
              <p>{{ result.lifeMinute }}</p>
              <p>分钟</p>
            </view>
          </view>
        </view>
        <view class="btn" @click="reset">重新计算</view>
      </view>
      <button class="share" open-type="share">分享</button>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import { globalData } from "@/enums/dataEnums";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      curPanel: "life",
      banner: null,
      birth: "1980-01-01",
      timer: null,
      showResult: false,
      isUnlock: false,
      result: {
        lifeAge: 0,
        lifeYear: 0,
        lifeMonth: 0,
        lifeWeek: 0,
        lifeDay: 0,
        lifeHour: 0,
        lifeMinute: 0,
      },
    };
  },
  onLoad(option) {
    adVideoCreate();
  },
  methods: {
    changeBirthChange(e) {
      clearTimeout(this.timer);
      this.birth = e.detail.value;
      this.showResult = false;
    },
    reset(){
      clearInterval(this.timer);
      this.timer = null;
      this.showResult = false;
    },
    tranTime(date) {
      this.timer = setInterval(() => {
        const startDate = new Date(date);
        const currentDate = new Date();
        
        // 计算精确年龄（包含小数）
        const diffInMilliseconds = currentDate - startDate;
        const ageInYears = diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25);
        this.result.lifeAge = ageInYears.toFixed(8);

        // 计算年、月、周、天、小时、分钟
        const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));
        const diffInHours = Math.floor(diffInMinutes / 60);
        const diffInDays = Math.floor(diffInHours / 24);
        const diffInWeeks = Math.floor(diffInDays / 7);
        const diffInMonths = Math.floor(diffInDays / 30.44); // 使用平均月份长度
        const diffInYears = Math.floor(diffInDays / 365.25); // 使用平均年份长度

        // 更新结果
        this.result.lifeYear = diffInYears;
        this.result.lifeMonth = diffInMonths;
        this.result.lifeWeek = diffInWeeks;
        this.result.lifeDay = diffInDays;
        this.result.lifeHour = diffInHours;
        this.result.lifeMinute = diffInMinutes;
      }, 300); // 每秒更新一次
    },
    getResult() {
      this.tranTime(this.birth);
      this.showResult = true;
      this.isUnlock = true;
    },
    submit() {
      if (this.birth == "") {
        this.global.toast("请设置出生日期");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.index {
  height: 100vh;
  width: 100%;
  padding: 60px 20px 20px 20px;
  box-sizing: border-box;
  .clock{
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto 40px auto;
  }
}
.death{
  background: #000;
}
.center {
  width: 100%;
}
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #eaeaea;
  // margin-top: 200px;
  border: 4rpx solid #c1c1c1;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 190px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      display: flex;
      input {
        width: 100%;
        display: inline-block;
        margin-right: 10px;
        background: #ccc;
        text-align: center;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #5f5f5f;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.label {
  text-align: center;
  margin-bottom: 10px;
}
.share{
  margin-top: 15px;
}
.result {
  margin-top: 20px;
  .table{
    border: 1px solid #2d2d2d;
    .row{
      display: flex;
      border-bottom: 1px solid #2d2d2d;
      &:last-child{
        border-bottom: 0;
      }
      .col{
        width: 100%;
        text-align: center;
        border-right: 1px solid #2d2d2d;
        padding: 10px 0;
        font-size: 18px;
        color: #2d2d2d;
        &:last-child{
          border-right: 0;
        }
      }
    }
  }

  .title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .desc {
    font-size: 16px;
    margin-bottom: 10px;
    color: #696969;
    text-align: center;
  }
}
.birth {
  padding: 8px 0;
  margin: 0 auto;
  display: block;
  width: 100%;
  text-align: center;
}
</style>
